<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta charset="utf-8">
    <title>角色权限维护</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico"/>
    <link rel="bookmark" href="${pageContext.request.contextPath}/favicon.ico"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/css/layui.css" media="all">
    <script type="application/javascript" src="${pageContext.request.contextPath}/webjars/layui/layui.js"
            charset="utf-8"></script>
    <script type="application/javascript" src="${pageContext.request.contextPath}/webjars/jquery/jquery.js"></script>
    <script type="application/javascript"
            src="${pageContext.request.contextPath}/private/js/loading/ajaxloading.js"></script>
</head>
<body>
<form id="form1" class="layui-form" action="">
    <fieldset class="layui-elem-field">
        <legend>菜单列表</legend>
        <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
    </fieldset>
</form>
<script id="switchTpl" type="text/html">
    <input type="checkbox" name="validflag" value="true" lay-skin="switch" lay-text="有效|无效" disabled {{
           d.validflag=='1'?'checked' : '' }}>
</script>
</body>
<script type="application/javascript">
    layui.config({
        base: '${pageContext.request.contextPath}/private/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['form', 'treetable'], function () {
        var form = layui.form;
        var table = layui.table;
        //switch off状态赋值
        form.on('switch', function (data) {
            $(data.elem).attr('type', 'hidden').val(this.checked ? '1' : '0');
        });

        //数据表格模块
        var treetable = layui.treetable;
        var renderTable = function () {
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'menuid',
                treePidName: 'pid',
                elem: '#auth-table',
                height:'330px',
                treeDefaultClose:true,
                url: '${pageContext.request.contextPath}/eyas/role/queryMenusByRoleId',
                where:{
                    roleid:${roleid}
                },
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'title',  width:'20%', title: '菜单名称',align:'center'},
                    {field: 'description', width:'30%', title: '菜单描述',align:'center'},
                    {field: 'validflag', title: '显示状态',width:'15%',templet: '#switchTpl',align:'center'},
                    {
                        field: 'isMenu', width: 80, align: 'center', templet: function (d) {
                        if (d.pid == 0) {
                            return '<span class="layui-badge layui-bg-blue">目录</span>';
                        } else {
                            return '<span class="layui-badge-rim">菜单</span>';
                        }
                    }, title: '类型'
                    },
                    {field: 'checkflag', fixed: 'right',align:'center',templet:function (d) {
                        if (d.pid == 0) {
                            return '<input type="checkbox" name="checkflag" title="获取权限" disabled>';
                        } else {
                            if(d.checkflag) {
                                return '<input type="checkbox" name="checkflag" value="'+d.menuid+'" lay-filter="lockDemo" title="获取权限" checked>';
                            }else {
                                return '<input type="checkbox" name="checkflag" value="'+d.menuid+'" lay-filter="lockDemo" title="获取权限">';
                            }

                        }
                    }, title: '操作'}
                ]]
            });
        };
        renderTable();

        form.on('checkbox(lockDemo)', function(obj){
            var menuid = this.value;
            var checkflag = obj.elem.checked;
            $.ajax({
                data : {roleid:${roleid},menuid:menuid,checkflag:checkflag},
                type : "PUT",
                url : "${pageContext.request.contextPath}/eyas/role/changeMenuRole",
                dataType : "json",
                success: function(data) {
                    layer.msg("修改成功");

                },
                error:function(xdata){
                    layer.msg(xdata.responseJSON.errormsg+",页面将在1秒后重新刷新");
                    setTimeout(function () {
                        renderTable();
                    },1000);

                }
            });
        });
    });
</script>
</html>
